/<template>
  <div class="content-outer">
    <Block class="content-head">
      <div class="search-form">
        <div class="search-item">
          <div class="item-label">制作方名称</div>
          <div class="item-content">
            <el-input
              v-model="formData.name"
              clearable
              placeholder="请输入合作方名称"
            ></el-input>
          </div>
        </div>
        <div class="search-item">
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="onSubmit"
          >查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button
            v-permission:cooperate-index-add
            type="primary"
            @click="add('新增')"
          >新增制作方</el-button>
        </div>
      </div>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:type="{row}">
            制作方
          </template>
          <template v-slot:name="{ row }">
            <div
              class="setname"
              style="display:flex;align-items: center;"
            >
              <div
                v-if="row.id != isSetRemarkId"
                class="remark"
              >{{ row.name }}</div>
              <el-input
                v-if="row.id == isSetRemarkId"
                v-model="row.name"
                clearable
                style="width: 190px;"
                placeholder="请输入内容"
                maxlength="40"
              ></el-input>
              <!-- <div class="status-drop-box">
                <i
                  v-if="row.id != isSetRemarkId"
                  class="el-icon-edit set_remark edit-icon"
                  @click="onSetRemark(row)"
                ></i>
              </div> -->
              <el-button
                v-if="row.id == isSetRemarkId"
                type="text"
                size="medium"
                style="margin-left: 10px;"
                @click="onSaveRemark(row.name)"
              >保存</el-button>
              <el-button
                v-if="row.id == isSetRemarkId"
                type="text"
                size="medium"
                style="color: #666;"
                @click="isSetRemarkId = ''"
              >取消</el-button>
            </div>
          </template>
          <template v-slot:zip="{row}">
            <el-button
              type="text"
              size="medium"
              @click="onLog(row,'编辑')"
            >日志</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="AddCooperateVue"
      drawer-size="400px"
      @ok="onSuccess"
    ></BiDrawer>
    <BiLog
      :value="log_info.visible"
      size="50%"
      :log-id="log_info.id"
      :model="'partner'"
      @onclose="onclose"
    ></BiLog>
  </div>
</template>

<script>
import { partnerList, partnerSave } from '@/api/cooperate.js'
import BiLog from '@/components/BiLog/index.vue'
import AddCooperateVue from '../components/AddCooperate.vue'
export default {
  components: { BiLog: BiLog },
  data() {
    return {
      AddCooperateVue,
      loading: false,
      tableData: [],
      isSetRemarkId: '',
      tableColums: [
        {
          label: '合作方类型',
          prop: 'type',
          slotScope: true
        },
        {
          label: '名称',
          prop: 'name',
          width: 500,
          slotScope: true
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      formData: {
        name: '',
        type: 2
      },
      optionsList: {
        miniApp: []
      },
      page_info: {
        total: 0,
        page: 1,
        page_size: 20
      },
      drawer: {
        visible: false,
        title: '',
        row: {}
      },
      log_info: {
        id: '',
        visible: false,
        row: {}
      }
    }
  },
  mounted() {
    this.onGetList()
  },
  methods: {
    onclose() {
      this.log_info.visible = false
    },
    onLog(row) {
      this.log_info = {
        row,
        id: row.id,
        visible: true
      }
    },
    onSetRemark(row) {
      this.isSetRemarkId = row.id
    },
    async onSaveRemark(name) {
      const res = await partnerSave({
        id: this.isSetRemarkId,
        type: 2,
        name: name
      })
      if (res.status_code === 1) {
        this.isSetRemarkId = ''
        this.$message.success(res.msg)
        this.onGetList()
      }
    },
    onSubmit() {
      this.page_info.page = 1
      this.onGetList()
    },
    handleReset() {
      this.formData.name = ''
    },
    add() {
      this.drawer = {
        visible: true,
        title: '新增制作方',
        row: { type: 2 }
      }
    },
    async onGetList() {
      const res = await partnerList({
        ...this.formData,
        ...this.page_info
      })
      if (res.status_code == 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
    },
    onSuccess() {
      this.onGetList()
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onGetList()
    }
  }
}
</script>

<style lang="scss" scoped>
.status-drop-box {
  .edit-icon {
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    color: #06c021;
    margin-left: 5px;
  }
}
.content-outer {
  padding-top: 10px !important;
}
.tag-mark {
  transform: scale(120%);
}
.el-table--enable-row-hover .el-table__body tr:hover > td .status-drop-box .edit-icon {
  opacity: 1;
}
.hover-row .edit-icon {
  opacity: 1;
}
.set_remark:hover {
  color: #06c021;
  cursor: pointer;
}
.remark {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
</style>